import { Component } from '@angular/core';
import { Route, RouterOutlet, Routes } from '@angular/router';
import { routes } from './app.routes';
import { MainNavComponent } from "../components/main-nav/main-nav.component";


import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, MainNavComponent, CommonModule],
  // templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  template: `

  <lib-main-nav [navItems]="mainNav"></lib-main-nav>

  <router-outlet />
  `,
})
export class AppComponent {
  title = 'demo-app';

  mainNav: {
    path: string;
    title: string;
    data: {
      url: string;
    };
    [key: string]: any;
    [key: symbol]: any;

  }[] = [];

  constructor() {
    this.mainNav = routes.filter((item: Partial<Route>) => item.path && item.title).map((item: Partial<Route>) => {
      return {
        path: item.path as string,
        title: item.title as string,
        data: item.data as { url: string },
      }
    });
  }
}
